Github+Hexo博客搭建小白教程（三）

  点击上方“果果小师弟”，选择“置顶/星标公众号”

干货福利，第一时间送达！

五、hexo博客主题安装以及一些个性化修改

5.1. 主题下载与安装

https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master下载 master分支的最新稳定版的代码，解压缩后，将hexo-theme-matery的文件夹复制到你Hexo的themes文件夹中即可。

当然你也可以在你的站点目录文件夹下使用git clone命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本(不定期更新优化)，自主选择版本。

1git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版
2git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)

5.2. 主题配置

5.2.1 切换主题

注意：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在D:\blog下，那么站点配置文件就是D:\blog\_config.yml，主题配置文件就是D:\blog\themes\matery\_config.yml。

另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。

主题下载完成后，将站点配置文件中的theme值修改为你下载主题的文件名，此处为matery，那么值就修改为theme: matery。

一些站点配置文件的其他地方的修改：

1. 语言选择：如果为中文用户，则在language:后添加值zh-CN，如果不修改，默认为英语；

2. 网址修改：url:的值为你的网址名，如http://xxxx.github.io，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。

3. 站点配置文件有个per_page属性，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果。

5.2.2 新建标签 tags 页面

tags页是用来展示所有标签的页面，如果在你的博客source目录下还没有tags/index.md文件，那么你就需要新建一个，命令如下：

1hexo new page "tags"

编辑你刚刚新建的页面文件/source/tags/index.md，至少需要以下内容：

1--- 
2title: tags 
3date: 2018-09-30 18:23:38 
4type: "tags" 
5layout: "tags" 
6---

5.2.3 新建分类 categories 页面

categories页是用来展示所有分类的页面，如果在你的博客source目录下还没有 categories/index.md文件，那么你就需要新建一个，命令如下：

1hexo new page "categories"

编辑你刚刚新建的页面文件/source/categories/index.md,至少需要以下内容：

1--- 
2title: categories
3 date: 2018-09-30 17:25:30 
4 type: "categories" 
5 layout: "categories" 
6 ---

5.2.4 新建关于我 about 页面

about页是用来展示关于我和我的博客信息的页面，如果在你的博客source目录下还没有about/index.md文件，那么你就需要新建一个，命令如下：

1hexo new page "about"

编辑你刚刚新建的页面文件/source/about/index.md，至少需要以下内容：

1--- 
2title: about 
3date: 2018-09-30 17:25:30 
4type: "about" 
5layout: "about" 
6---

5.2.5 新建留言板 contact 页面 (可选)

contact页是用来展示留言板信息的页面，如果在你的博客source目录下还没有 contact/index.md文件，那么你就需要新建一个，命令如下：

1hexo new page "contact"

编辑你刚刚新建的页面文件/source/contact/index.md,至少需要以下内容：

1--- 
2title: contact 
3date: 2018-09-30 17:25:30 
4type: "contact" 
5layout: "contact" 
6---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的_config.yml文件中，第19至21行的“菜单”配置，取消关于留言板的注释即可。

5.2.6 新建友情链接 friends 页面 (可选)

friends页是用来展示友情链接信息的页面，如果在你的博客source目录下还没有 friends/index.md文件，那么你就需要新建一个，命令如下：

1hexo new page "friends"

编辑你刚刚新建的页面文件/source/friends/index.md,至少需要以下内容：

1--- 
2title: friends 
3date: 2018-12-12 21:25:30 
4type: "friends" 
5layout: "friends" 
6---

同时，在你的博客source目录下新建_data目录，在_data目录中新建 friends.json文件，文件内容如下所示：

1[{
2    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
3    "name": "码酱",
4    "introduction": "我不是大佬，只是在追寻大佬的脚步",
5    "url": "http://luokangyuan.com/",
6    "title": "前去学习"
7}, {
8    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
9    "name": "闪烁之狐",
10    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
11    "url": "https://blinkfox.github.io/",
12    "title": "前去学习"
13},{
14    "name": "过客~励む",
15    "avatar": "https://yafine-blog.cn/medias/avatar.jpg",
16    "url": "https://yafine-blog.cn",
17    "introduction": "你现在的努力，是为了以后有更多的选择",
18    "title": "前去学习"
19},{
20    "name": "小师弟",
21    "avatar": "https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/xiaoshidi.jpg",
22    "url": "https://www.liuyao-blog.cn",
23    "introduction": "一个喜欢嵌入式的小码农",
24    "title": "前去学习"
25}]

5.2.7 菜单导航配置

5.2.7.1. 配置基本菜单导航的名称、路径url和图标icon.

1.菜单导航名称可以是中文也可以是英文(如：Index或主页)

2.图标icon 可以在Font Awesome 中查找

1menu: 
2  Index: 
3    url: / 
4   icon: fas fa-home 
5  Tags: 
6    url: /tags 
7    icon: fas fa-tags 
8  Categories: 
9    url: /categories 
10    icon: fas fa-bookmark 
11  Archives: 
12    url: /archives 
13    icon: fas fa-archive 
14  About: 
15    url: /about 
16    icon: fas fa-user-circle 
17  Friends: 
18    url: /friends 
19    icon: fas fa-address-book

5.2.7.2. 二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)

2.在children下创建二级菜单的 名称name,路径url和图标icon.

3.注意每个二级菜单模块前要加 -。

4.注意缩进格式

1menu:
2  Index:
3    url: /
4    icon: fas fa-home
5  Tags:
6    url: /tags
7    icon: fas fa-tags
8  Categories:
9    url: /categories
10    icon: fas fa-bookmark
11  Archives:
12    url: /archives
13    icon: fas fa-archive
14  About:
15    url: /about
16    icon: fas fa-user-circle
17  Contact:
18    url: /contact
19    icon: fas fa-comments
20  Friends:
21    url: /friends
22    icon: fas fa-address-book
23   二级菜单写法如下
24  Medias:
25    icon: fas fa-list
26    children:
27      - name: Musics
28        url: /musics
29        icon: fas fa-music
30      - name: Movies
31        url: /movies
32        icon: fas fa-film
33      - name: Books
34        url: /books
35        icon: fas fa-book
36      - name: Galleries
37        url: /galleries
38        icon: fas fa-image

5.2.8 添加emoji表情支持（可选的）

本主题新增了对emoji表情的支持，使用到了hexo-filter-github-emojis的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如:smile:）转变成会跳跃的emoji表情，安装命令如下：

1npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：

1githubEmojis: 
2  enable: true 
3  className: github-emoji 
4  inject: true 
5  styles: 
6  customEmojis:

执行hexo clean && hexo g重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。

5.2.9 代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin的 Hexo 插件来做代码高亮，安装命令如下：

1npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下_config.yml文件中highlight.enable的值为 false，并新增prism插件相关的配置，主要配置如下：

1prism_plugin: 
2  mode: 'preprocess' # realtime/preprocess 
3  theme: 'tomorrow' 
4  line_number: false # default false 
5  custom_css:

5.2.10 搜索

本主题中还使用到了hexo-generator-search的Hexo插件来做内容搜索，安装命令如下：

1npm install hexo-generator-search --save

在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：

1search:
2  path: search.xml
3  field: post

5.2.11 中文链接转拼音（可选的）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且gitment评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

1npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1permalink_pinyin:
2  enable: true
3  separator: '-' # default: '-'

5.2.12 文章字数统计插件（可选的）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装hexo-wordcount,安装命令如下：

1npm i --save hexo-wordcount

然后只需在本主题下的_config.yml 文件中，激活以下配置项即可：

1wordCount: 
2   enable: false # 将这个值设置为 true 即可. 
3   postWordCount: true 
4   min2read: true 
5   totalCount: true

5.2.13 添加 RSS 订阅支持（可选的）

本主题中还使用到了hexo-generator-feed的Hexo插件来做RSS，安装命令如下：

1npm install hexo-generator-feed --save

在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：

1feed: 
2  type: atom 
3  path: atom.xml 
4  limit: 20 
5  hub: 
6  content: 
7  content_limit: 140 
8  content_limit_delim: ' ' 
9  order_by: -date

执行hexo clean && hexo g重新生成博客文件，然后在public文件夹中即可看到atom.xml文件，说明你已经安装成功了。

5.2.14 添加 DaoVoice 在线聊天功能（可选的）

前往DaoVoice官网注册并且获取app_id，并将app_id填入主题的_config.yml文件中

5.2.15 添加 Tidio 在线聊天功能（可选的）

前往Tidio官网注册并且获取Public Key，并将 Public Key填入主题的_config.yml文件中。

5.2.16 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的/layout/_partial/footer.ejs文件中，包括站点、使用的主题、访问量等。

5.2.17 修改社交链接

在主题的_config.yml文件中，默认支持QQ、GitHub和邮箱等的配置，你可以在主题文件的/layout/_partial/social-link.ejs文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码

1<% if (theme.socialLink.github) { %> 
2    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> 
3    <i class="fab fa-github"></i> 
4    </a> 
5<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome中搜索找到。以下是常用社交图标的标识，供你参考：

• Facebook: fab fa-facebook
• Twitter: fab fa-twitter
• Google-plus: fab fa-google-plus
• Linkedin: fab fa-linkedin
• Tumblr: fab fa-tumblr
• Medium: fab fa-medium
• Slack: fab fa-slack
• Sina Weibo: fab fa-weibo
• Wechat: fab fa-weixin
• QQ: fab fa-qq
• Zhihu: fab fa-zhihu

注意: 本主题中使用的Font Awesome版本为5.11.0。

5.2.18 修改打赏的二维码图片

在主题文件的source/medias/reward文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

5.2.19 配置音乐播放器（可选的）

要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。

首先，在你的博客source目录下的_data目录（没有的话就新建一个）中新建 musics.json文件，文件内容如下所示：

1[{ "name": "五月雨变奏电音", 
2   "artist": "AnimeVibe", 
3   "url": "http://xxx.com/music1.mp3", 
4   "cover": "http://xxx.com/music-cover1.png" 
5}, { 
6  "name": "Take me hand", 
7  "artist": "DAISHI DANCE,Cecile Corbel", 
8  "url": "/medias/music/music2.mp3", 
9  "cover": "/medias/music/cover2.png" 
10}, {
11   "name": "Shape of You", 
12   "artist": "J.Fla", 
13   "url": "http://xxx.com/music3.mp3", 
14   "cover": "http://xxx.com/music-cover3.png" 
15}]

注：以上 JSON 中的属性：name、artist、url、cover分别表示音乐的名称、作者、音乐文件地址、音乐封面。

然后，在主题的_config.yml配置文件中激活配置即可：

1# Whether to display the musics.
2# 是否在首页显示音乐.
3music:
4  enable: true
5  showTitle: true
6  title: 听听音乐
7  fixed: false # 开启吸底模式
8  autoplay: false # 是否自动播放
9  theme: '#42b983'
10  loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
11  order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
12  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
13  volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
14  listFolded: false # 列表默认折叠
15  listMaxHeight: #列表最大高度

最后附上本人博客链接：www.liuyao-blog.cn

欢迎访问来扰！

END

---

微信公众号：果果小师弟
关注可了解获取更多的免费资料;
如果你觉得文章对你有帮助，转发分享，欢迎赞赏

最后

10T资源大放送！包括但不限于：C/C++，Linux，Python，Java，PHP，人工智能，PCB、FPGA、DSP、单片机、等等！在公众号内回复「更多资源」，即可免费获取，期待你的关注！！！